<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>vue-入门Day.05 | 让技术更简单</title>

  <!-- keywords -->
  

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="vue-cli原先：只有一个页面入口 SPA现在：多个页面入口  MPA vue-router如何使用： 安装如果你有一个正在使用 Vue CLI的项目，你可以以项目插件的形式添加 Vue Router。CLI 可以生成上述代码及两个示例路由。它也会覆盖你的 App.vue，因此请确保在项目中运行以下命令之前备份这个文件： 1npx vue add router  通过vue add router">
<meta property="og:type" content="article">
<meta property="og:title" content="vue-入门Day.05">
<meta property="og:url" content="http://example.com/2022/03/21/vue-day05/index.html">
<meta property="og:site_name" content="让技术更简单">
<meta property="og:description" content="vue-cli原先：只有一个页面入口 SPA现在：多个页面入口  MPA vue-router如何使用： 安装如果你有一个正在使用 Vue CLI的项目，你可以以项目插件的形式添加 Vue Router。CLI 可以生成上述代码及两个示例路由。它也会覆盖你的 App.vue，因此请确保在项目中运行以下命令之前备份这个文件： 1npx vue add router  通过vue add router">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2022-03-21T06:18:53.000Z">
<meta property="article:modified_time" content="2022-03-21T11:47:39.924Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternative" href="/atom.xml" title="让技术更简单" type="application/atom+xml">
  
  
    <link rel="icon" href="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  

  
<script src="//cdn.bootcss.com/require.js/2.3.2/require.min.js"></script>

  
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>


  
<meta name="generator" content="Hexo 6.1.0"></head>
<body>
  <div id="container">
    <div id="particles-js"></div>
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			
			<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/"></a></h1>
		</hgroup>

		

		
			<div class="switch-btn">
				<div class="icon">
					<div class="icon-ctn">
						<div class="icon-wrap icon-house" data-idx="0">
							<div class="birdhouse"></div>
							<div class="birdhouse_holes"></div>
						</div>
						<div class="icon-wrap icon-ribbon hide" data-idx="1">
							<div class="ribbon"></div>
						</div>
						
						<div class="icon-wrap icon-link hide" data-idx="2">
							<div class="loopback_l"></div>
							<div class="loopback_r"></div>
						</div>
						
						
					</div>
					
				</div>
				<div class="tips-box hide">
					<div class="tips-arrow"></div>
					<ul class="tips-inner">
						<li>菜单</li>
						<li>标签</li>
						
						<li>友情链接</li>
						
						
					</ul>
				</div>
			</div>
		

		<div class="switch-area">
			<div class="switch-wrap">
				<section class="switch-part switch-part1">
					<nav class="header-menu">
						<ul>
						
							<li><a href="/">主页</a></li>
				        
							<li><a href="/archives">所有文章</a></li>
				        
						</ul>
					</nav>
					<nav class="header-nav">
						<div class="social">
							
						</div>
					</nav>
				</section>
				
				
				<section class="switch-part switch-part2">
					<div class="widget tagcloud" id="js-tagcloud">
						
					</div>
				</section>
				
				
				
				<section class="switch-part switch-part3">
					<div id="js-friends">
					
			          <a target="_blank" class="main-nav-link switch-friends-link" href="https://github.com/smackgg/hexo-theme-smackdown">smackdown</a>
			        
			        </div>
				</section>
				

				
			</div>
		</div>
	</header>				
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"></div>
  		<h1 class="header-author js-mobile-header hide"></h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author"></h1>
			</hgroup>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/archives">所有文章</a></li>
		        
		        <div class="clearfix"></div>
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div class="body-wrap"><article id="post-vue-day05" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2022/03/21/vue-day05/" class="article-date">
  	<time datetime="2022-03-21T06:18:53.000Z" itemprop="datePublished">2022-03-21</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      vue-入门Day.05
      
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
        

        
        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="vue-cli"><a href="#vue-cli" class="headerlink" title="vue-cli"></a>vue-cli</h1><p>原先：只有一个页面入口 SPA<br>现在：多个页面入口  MPA</p>
<h2 id="vue-router"><a href="#vue-router" class="headerlink" title="vue-router"></a>vue-router</h2><p>如何使用：</p>
<h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p>如果你有一个正在使用 <code>Vue CLI</code>的项目，你可以以<strong>项目插件的形式</strong>添加 <code>Vue Router</code>。CLI 可以生成上述代码及两个示例路由。它也会覆盖你的 App.vue，因此请确保在项目中运行以下命令之前备份这个文件：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx vue add router</span><br></pre></td></tr></table></figure>

<p>通过vue add router方式安装更便捷，如果不这样做的话需要自己写路由<br>例子：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在main.js中写</span></span><br><span class="line">import VueRouter from &#x27;vue-router&#x27;;</span><br><span class="line">Vue.use(VueRouter);</span><br><span class="line">const router=new Vuerouter(<span class="punctuation">&#123;</span></span><br><span class="line">    routes<span class="punctuation">:</span><span class="punctuation">[</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">            path<span class="punctuation">:</span>&#x27;/&#x27;<span class="punctuation">,</span></span><br><span class="line">            name<span class="punctuation">:</span>&#x27;index&#x27;<span class="punctuation">,</span></span><br><span class="line">            component<span class="punctuation">:</span>()=&gt;import(&#x27;./views/About.vue&#x27;)</span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">    mode<span class="punctuation">:</span>&#x27;history&#x27;<span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span>);</span><br></pre></td></tr></table></figure>

<p>安装了这个插件之后会自动添加views、router文件，对<code>App.vue</code>、<code>main.js</code>等进行router转化以及引入，之后在<code>index.js</code>中注册插件，对网址进行触发操作并对router进行实例化操作，如下：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import VueRouter from &#x27;vue-router&#x27;</span><br><span class="line">import HomeView from &#x27;../views/HomeView.vue&#x27;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Vue.use注册插件、安装 Vue.js 插件</span></span><br><span class="line">Vue.use(VueRouter);</span><br><span class="line"></span><br><span class="line">const routes = <span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="comment">// 访问地址</span></span><br><span class="line">    path<span class="punctuation">:</span> &#x27;/&#x27;<span class="punctuation">,</span></span><br><span class="line">    name<span class="punctuation">:</span> &#x27;home&#x27;<span class="punctuation">,</span></span><br><span class="line">    <span class="comment">// 静态触发</span></span><br><span class="line">    component<span class="punctuation">:</span> HomeView</span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    path<span class="punctuation">:</span> &#x27;/about&#x27;<span class="punctuation">,</span></span><br><span class="line">    name<span class="punctuation">:</span> &#x27;about&#x27;<span class="punctuation">,</span></span><br><span class="line">    <span class="comment">// route level code-splitting</span></span><br><span class="line">    <span class="comment">// this generates a separate chunk (about.[hash].js) for this route</span></span><br><span class="line">    <span class="comment">// which is lazy-loaded when the route is visited.</span></span><br><span class="line">    <span class="comment">// 动态触发</span></span><br><span class="line">    component<span class="punctuation">:</span> () =&gt; import(<span class="comment">/* webpackChunkName: &quot;about&quot; */</span> &#x27;../views/AboutView.vue&#x27;)</span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="comment">// 访问地址</span></span><br><span class="line">    path<span class="punctuation">:</span> &#x27;/xxx&#x27;<span class="punctuation">,</span></span><br><span class="line">    name<span class="punctuation">:</span> &#x27;xxxx&#x27;<span class="punctuation">,</span></span><br><span class="line">    <span class="comment">// 静态触发</span></span><br><span class="line">    component<span class="punctuation">:</span> ()=&gt;import(&#x27;../views/AboutView.vue&#x27;)</span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">]</span></span><br><span class="line"></span><br><span class="line">const router = new VueRouter(<span class="punctuation">&#123;</span></span><br><span class="line">  routes<span class="punctuation">,</span></span><br><span class="line">  <span class="comment">// 使用history模式，不用加锚点,不加这个的话直接自动hash模式</span></span><br><span class="line">  mode<span class="punctuation">:</span><span class="string">&quot;history&quot;</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span>)</span><br><span class="line"></span><br><span class="line">export default router</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>其中，可通过<code>$route</code>等获取其中的数据，如下：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">mounted()<span class="punctuation">&#123;</span></span><br><span class="line">    console.log(this.$route);<span class="comment">//获取的为一个对象，里面包含着home里面的所有信息。对应当前路径下的路由</span></span><br><span class="line">    console.log(this.$router);<span class="comment">//vue router的实例化数据，router的全局配置</span></span><br><span class="line">    console.log(this.$routes);<span class="comment">//为undefined</span></span><br><span class="line">    console.log(this.router);<span class="comment">//undefined</span></span><br><span class="line">    console.log(this.routes);<span class="comment">//undefined</span></span><br><span class="line">    console.log(this.route);<span class="comment">//undefined</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="router-view"><a href="#router-view" class="headerlink" title="router-view"></a>router-view</h2><p>router-view是router中的嵌套路由配置，相当于一个<strong>容器</strong>，所有的外部内容都在这个容器中，可通过网址来获取里面的内容。<code>router-view</code>将显示与url相对应的组件，可以把它放在任意地方，以适合布局。<br>如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 嵌套路由，相当于一个容器 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="router-link"><a href="#router-link" class="headerlink" title="router-link"></a>router-link</h2><p>就类似于a标签，<router-link> 组件支持用户在具有路由功能的应用中 (点击) <strong>导航</strong>。 通过 to 属性指定目标地址，默认渲染成带有<strong>正确链接的 <a> 标签</strong>，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。</p>
<p>如：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to=<span class="string">&quot;/&quot;</span>&gt;Home&lt;/router-link&gt;</span><br><span class="line">&lt;router-link to=<span class="string">&quot;/about&quot;</span>&gt;About&lt;/router-link&gt;</span><br></pre></td></tr></table></figure>

<p>显而易见，<strong>点击</strong>后在原有网址后面加上to的值<strong>组成一个新的网址</strong></p>

      
    </div>
    
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2022/03/22/vue-day06/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">&lt;</strong>
      <div class="article-nav-title">
        
          vue-入门Day.06
        
      </div>
    </a>
  
  
    <a href="/2022/03/19/vue-day-04/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">vue-入门Day.04</div>
      <strong class="article-nav-caption">&gt;</strong>
    </a>
  
</nav>

  
</article>


<div class="ds-share share" data-thread-key="vue-day05" data-title="vue-入门Day.05" data-url="http://example.com/2022/03/21/vue-day05/"  data-images="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" data-content="vue-入门Day.05">
    <div class="ds-share-inline">
      <ul  class="ds-share-icons-16">
      	<li data-toggle="ds-share-icons-more"><a class="ds-more" href="javascript:void(0);">分享到：</a></li>
        <li><a class="ds-weibo" href="javascript:void(0);" data-service="weibo">微博</a></li>
        <li><a class="ds-qzone" href="javascript:void(0);" data-service="qzone">QQ空间</a></li>
        <li><a class="ds-qqt" href="javascript:void(0);" data-service="qqt">腾讯微博</a></li>
        <li><a class="ds-wechat" href="javascript:void(0);" data-service="wechat">微信</a></li>
      </ul>
      <div class="ds-share-icons-more">
      </div>
    </div>
 </div>
 





</div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
      <div class="footer-left">
        &copy; 2022 John Doe
      </div>
        <div class="footer-right">
          <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/smackgg/hexo-theme-smackdown" target="_blank">Smackdown</a>
        </div>
    </div>
  </div>
</footer>
    </div>
    
  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">



<script>
	var yiliaConfig = {
		fancybox: true,
		mathjax: true,
		animate: true,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false
	}
</script>

<script src="/js/main.js"></script>




<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js"></script>


  </div>
</body>
</html>